<template>
  <div class="ma-content-block lg:flex justify-between">
    <sa-table ref="crudRef" :options="options" :columns="columns" :searchForm="searchForm" @resetSearch="resetSearch">
      <template #tableSearch>
        <a-col :span="8">
          <a-form-item field="user" label="会员账号">
            <a-input v-model="searchForm.user"  placeholder="会员账号" allow-clear @keydown.enter="refresh" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item field="uid" label="会员UID">
            <a-input v-model="searchForm.uid"  placeholder="会员UID" allow-clear @keydown.enter="refresh" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item field="account" label="账号">
            <a-input v-model="searchForm.account" placeholder="请输入" :allow-clear="true" @keydown.enter="refresh"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item field="date" label="日期">
            <a-range-picker v-model="searchForm.date" format="YYYY-MM-DD" :allow-clear="true"  @change="refresh"></a-range-picker>
          </a-form-item>
        </a-col>
      </template>
      <template #state="{record}">
        <a-space size="mini">
          <a-tag v-if="record.state==0" color="green">未使用</a-tag>
          <a-tag v-if="record.state==1" color="orange">已使用</a-tag>
        </a-space>
      </template>
    </sa-table>
  </div>
</template>
  <script setup>
  import { onMounted, ref, reactive, computed,watch } from 'vue'
  import msgApi from '@/api/system/member'
  import SaTable from '@cps/sa-table/index.vue'
  import { Message } from '@arco-design/web-vue'
  import { throttle } from 'lodash';
  import tool from '@/utils/tool'
  const crudRef = ref()
  const searchForm = ref({
    user:'',
    date:[],
    type:'',
    account:'',
    uid:'',

  })
  const options = reactive({
    api: msgApi.codeSend,//表格数据接口
    operationColumnWidth: 200,//操作欄
    showSearch:true,
    columnAlign: 'center',
    pageSimple: false,//是否展示操作欄有 以及工具欄 false 为都显示  true 不现实
    isTreeTable:false,//如果数据中有children 并且不想显示樹狀结構 请置false
    singleLine:false,
    isExpand: false,//展開所有子樹
    operationColumn:false,
  })
  const columns = reactive([
    { title: 'ID', dataIndex: 'id', width: 80 },
    { title: 'UID', dataIndex: 'user_id', width: 100 },
    { title: '会员账号', dataIndex: 'user_name', width: 100 },
    { title: '国码', dataIndex: 'account', width: 140 },
    { title: '账户', dataIndex: 'account', width: 150 },
    { title: '验证码', dataIndex: 'code', width: 100 },
    { title: '来源', dataIndex: 'source_text', width: 100 },
    { title: '类型', dataIndex: 'send_type_text', width: 100 },
    { title: '状态', dataIndex: 'state', width: 100 },
    { title: '创建时间', dataIndex: 'create_time', width: 180 },
  ])
  
  const initPage = async () => {}
  const resetSearch=()=>{
    searchForm.value.date = []
  }
  const refresh = async () => {
    crudRef.value?.refresh()
  }
  const paramsData=ref([])
  const getParams=async()=>{
   
  }
  
  onMounted(async () => {
    initPage()
    refresh()
    getParams()
  })
  </script>
  
  <style scoped>
  .icon {
    width: 1em;
  }
  </style>
  
